<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>视界之声</title>
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="icon" href="../static/favicon.ico" />
    <!-- <link rel="manifest" href="../static/manifest.json" /> -->
</head>

<body>
    <!-- 登录容器 -->
    <div class="login-container" id="login-container" role="form" aria-label="登录表单">
        <h2>欢迎登录</h2>
        <div class="login-type-switch">
            <span id="phone_login" class="active">手机验证码登录</span>
            <span id="password_login">账号密码登录</span>
            <div class="slider" id="slider"></div>
        </div>
        <div class="login-type-password" id="login-type-password" style="display: none;">
            <div class="input-group">
                <label for="username" aria-label="用户名">用户名:</label>
                <input type="text" placeholder="请输入用户名" id="username" aria-label="请输入用户名">
            </div>

            <div class="input-group password">
                <label for="password" aria-label="密码">密码:</label>
                <input type="password" placeholder="请输入密码" id="password" aria-label="请输入密码">
            </div>
        </div>

        <div class="login-type-phone" id="login-type-phone">
            <div class="input-group">
                <label for="login_phone" aria-label="手机号">手机号:</label>
                <input type="text" placeholder="请输入手机号" id="login_phone" aria-label="请输入手机号">
            </div>
            <div class="input-group" style="display: flex; gap: 10px; position: relative;">
                <div style="flex: 1;">
                    <label for="phone_code" aria-label="手机验证码">验证码:</label>
                    <input type="text" placeholder="请输入手机验证码" id="phone_code" aria-label="请输入手机验证码">
                </div>
                <button id="get_code_btn_login"
                    style="position: absolute; right: 0; bottom: 0; width: 115px; height: 40px; background: #3eb575; color: white; border: none; border-radius: 5px; cursor: pointer;">获取验证码</button>
            </div>
        </div>




        <div class="message" id="login_message" style="display: none;"></div>
        <button id="login_button" aria-label="登录">登录</button>
        <p class="register-link">还没有账号？<a href="#" id="go_to_register">点击注册</a></p>
    </div>

    <!-- 注册容器 -->
    <div class="register-container" id="register-container" role="form" aria-label="注册表单" style="display: none;">
        <h2>用户注册</h2>
        <div class="input-group">
            <label for="register_username" aria-label="用户名">用户名:</label>
            <input type="text" placeholder="请输入用于登录的用户名" id="register_username" aria-label="请输入用于登录的用户名">
        </div>

        <div class="input-group">
            <label for="register_nickname" aria-label="昵称">昵称:</label>
            <input type="text" placeholder="请输入昵称" id="register_nickname" aria-label="请输入昵称">
        </div>

        <div class="input-group">
            <label for="register_phone" aria-label="手机号">手机号:</label>
            <input type="text" placeholder="请输入手机号" id="register_phone" aria-label="请输入手机号">
        </div>



        <div class="input-group">
            <label for="register_password" aria-label="密码">密码:</label>
            <input type="password" placeholder="请输入密码" id="register_password" aria-label="请输入密码">
        </div>

        <div class="input-group">
            <label for="register_confirm_password" aria-label="确认密码">确认密码:</label>
            <input type="password" placeholder="请再次输入密码" id="register_confirm_password" aria-label="请再次输入密码">
        </div>

        <div class="input-group" style="display: flex; gap: 10px; position: relative;">
            <div style="flex: 1;">
                <label for="register_code" aria-label="验证码">验证码:</label>
                <input type="text" placeholder="请输入验证码" id="register_code" aria-label="请输入验证码">
            </div>
            <button id="get_code_btn_register"
                style="position: absolute; right: 0; bottom: 0; width: 115px; height: 40px; background: #3eb575; color: white; border: none; border-radius: 5px; cursor: pointer;">获取验证码</button>
        </div>


        <div class="message" id="register_message" style="display: none;"></div>
        <button id="register_button" aria-label="注册">注册</button>
        <p class="login-link">已有账号？<a href="#" id="back_to_login">返回登录</a></p>

    </div>
    <div class="bottom-text">
        <p>
            © 2024 VisionVoice. All Rights Reserved<br>
            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">闽ICP备2024055854号</a>
        </p>
    </div>
    <script type="module" src="../static/js/lib/secretUtils.js"></script>
    <script type="module" src="../static/js/lib/audioUtils.js"></script>
    <script type="module" src="../static/js/index.js"></script>
    <script>
        // 注册service worker
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/static/service-worker.js')
                .then(function (registration) {
                    console.log('Service Worker registered with scope:', registration.scope);
                }).catch(function (error) {
                    console.log('Service Worker registration failed:', error);
                });
        }
    </script>
</body>

</html>